<template>
	<view class="header">
		<view class="header_box">
			<view class="header_box_inpbox">
				<icon type="search" size="15" class="header_box_inpbox_search"></icon>
				<input @tap="goSearch" disabled type="text" placeholder="搜索" placeholder-style="font-size: 24upx"
					class="header_box_inpbox_input">
			</view>
			<icon class="icon icon-cate" @tap="goshop"></icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: "SearchHeader",
		data() {
			return {

			};
		},
		props: {
			backgroundColor: {
				type: String,
				default: "rgb(172, 104, 83)"
			},
		},
		methods: {
			goshop() {
				uni.navigateTo({

					url: "/pages/shop/index"
				})
			},
			goSearch() {
				this.$common.navigateTo({}, "/pages/search/index")
			}
		}
	}
</script>

<style lang="scss">
	.header {
		width: 100%;
		height: 100upx;
		box-sizing: border-box;
		padding: 30upx 0 10upx 0;
		background: linear-gradient(90deg, #FF492B 0%, #FF4140 100%);

		&_box {
			width: 686upx;
			height: 60upx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&_inpbox {
				width: 600upx;
				height: 100%;
				background-color: #fff;
				border-radius: 20upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&_search {
					margin-left: 20upx;
				}

				&_input {
					flex: .97;
				}
			}
		}
	}
</style>
